<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="" prop="title">
          <el-input class="setWidth" v-model="queryParams.title" placeholder="通知标题" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" @click="handleAddEdit('add')">新增消息通知</el-button>
        <!-- <export-excel-button
              title="消息信息列表"
              action="/userManager/customer/export"
              :params="ExportParams"
            /> -->
      </div>
      <el-table v-loading="loading" :data="newsList" stripe border>
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column label="通知标题" align="center" prop="title" :show-overflow-tooltip="true" />
        <el-table-column label="通知副标题" align="center" prop="details" :show-overflow-tooltip="true" />
        <el-table-column label="通知人数" align="center" prop="customerTotal" :show-overflow-tooltip="true" />
        <el-table-column label="通知状态" align="center" prop="payMoney" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1">草稿</div>
            <div v-else-if="scope.row.status == 2">已通知</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column label="是否附赠权益" align="center" prop="useEquity" :show-overflow-tooltip="true" />
        <el-table-column label="权益类型" align="center" prop="" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="equityTypeLs" :value="scope.row.equityType" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleAddEdit('look',scope.row)" v-if="scope.row.status == 2">查看
            </el-button>
            <el-button size="mini" type="text" @click="handleAddEdit('edit',scope.row)" v-if="scope.row.status == 1"> 编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

    </div>
    <!-- 添加/编辑 -->
    <detail-dialog :id="dialogId" :noticetype="noticetype" v-bind="$attrs" v-if="dialogVisible"
      :visible.sync="dialogVisible" @success="_handleSuccess" />
  </div>
</template>

<script>
  import {
    getMessageList
  } from "@/api/sYMessageNotification";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  import DetailDialog from "./components/DetailDialog";
  export default {
    name: "Customer",
    components: {
      ExportExcelButton,
      DetailDialog
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 消息列表表格数据
        newsList: [],
        // 弹窗标识  
        dialogVisible: false,
        // 编辑状态
        noticetype: 'add',
        // 查询参数id
        dialogId: null,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          title: null,
        },
        equityTypeLs:[],
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.getDictequityTypeLs();
      this.getList();
    },
    methods: {
      //获取权益类型状态字典
      getDictequityTypeLs() {
        var dictType = "customer_message_equity_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.equityTypeLs = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      /** 查询消息列表列表 */
      getList() {
        this.loading = true;
        getMessageList(this.queryParams).then(response => {

          this.total = response.result.total
          this.newsList = response.result.records
          this.newsList = this.newsList.map(item => {
            // console.log('item',item)
            Object.keys(item).forEach(key => {
              if (item[key] === '') {
                item[key] = '-'
              }
            })
            return item
          })
          console.log('this.newsList', this.newsList)
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
      /** 详情按 */
      handleAddEdit(type, row = '') {

        if (type == 'edit' || type == 'look') {
          this.dialogId = row.id
        } else {
          this.dialogId = null
        }
        this.noticetype = type
        this.dialogVisible = true

      },
      _handleSuccess(e) {
        this.newsList = [];
        this.queryParams.pageNum = 1;
        this.queryParams.pageSize = 10;
        this.getList();
      },

    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;

  }

  .setWidth {
    width: 300px;
  }

</style>
